<!--
  * @Description: 信息收集列表
  * @Author: xinqiao lxq1990.0716@qq.com
  * @Date: 2024-06-16
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-06-16
-->

<script lang="ts" setup>
  import { Form, message } from 'ant-design-vue'
  import { onMounted, reactive, ref, watch } from 'vue'

  import { requestPartnerCooperationPage, requestPartnerCooperationUpdate } from '/@/api/business/datamarket/partnerCooperation'
  import { StatusDesc } from '/@/api/business/datamarket/partnerCooperation/enum'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  /** 搜索条件 */
  const searchParam = reactive({
    /** 公司名称 */
    companyName: '',
    /** 姓名 */
    contactName: '',
    /** 电话 */
    contactPhone: '',
    /** 状态 */
    status: undefined,
    /** 提交时间区间，格式：yyyy-MM-dd~yyyy-MM-dd */
    submitTimeRange: '',
  })

  /** 搜索条件-提交时间 */
  const searchTimes = ref([])

  watch(
    () => searchTimes.value,
    (val) => {
      if (val?.length > 0) {
        searchParam.submitTimeRange = `${val[0]}~${val[1]}`
      } else {
        searchParam.submitTimeRange = ''
      }
    },
  )

  /** 搜索条件下拉项 */
  const searchOptions = reactive({
    /** 状态 */
    status: Object.entries(StatusDesc).map((item) => ({ value: parseInt(item[0]), label: item[1] })),
  })

  /** 表格配置 */
  const columns = [
    { title: '序号', key: 'no' },
    { title: '公司名称', dataIndex: 'companyName' },
    { title: '姓名', dataIndex: 'contactName' },
    { title: '联系电话', dataIndex: 'contactPhone' },
    { title: '业务诉求', dataIndex: 'businessDemand' },
    { title: '状态', dataIndex: 'status', customRender: ({ text }) => StatusDesc[text] },
    { title: '备注', dataIndex: 'remark', customRender: ({ text }) => text ?? '--' },
    { title: '提交时间', dataIndex: 'submitTime' },
    { title: '操作', key: 'action' },
  ]

  /** 分页查询hook */
  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<PartnerCooperationPageTypes.IRequest, PartnerCooperationPageTypes.IResponse[]>(searchParam, requestPartnerCooperationPage)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.companyName = ''
    searchParam.contactName = ''
    searchParam.contactPhone = ''
    searchParam.status = undefined
    searchParam.submitTimeRange = ''
    searchTimes.value = []
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /**
   * 去沟通
   * @param data 数据记录
   */
  const openModal = (data: PartnerCooperationPageTypes.IResponse) => {
    resetFields()
    modal.visible = true
    modal.rowData = data
    form.state.status = data.status as unknown as undefined
    form.state.remark = data.remark
  }

  /** 沟通弹窗 */
  const modal = reactive({
    visible: false,
    rowData: {} as PartnerCooperationPageTypes.IResponse,
  })

  /** 表单配置 */
  const form = reactive({
    state: {
      /** 状态 */
      status: undefined,
      /** 备注 */
      remark: '',
    },
    options: {
      status: Object.entries(StatusDesc).map((item) => ({ label: item[1], value: parseInt(item[0]) })),
    },
    rule: {
      status: [{ required: true, message: '请选择状态' }],
    },
    onOk: () => {
      validate()
        .then(async () => {
          const { responseCode } = await requestPartnerCooperationUpdate({
            id: modal.rowData.id,
            status: form.state.status,
            remark: form.state.remark,
          })
          if (responseCode === HttpCodeEnum.SUCCESS) {
            message.success('操作成功')
            modal.visible = false
            search()
          }
        })
        .catch(() => {})
    },
  })

  /** 表单hook */
  const { validate, validateInfos, resetFields } = Form.useForm(form.state, form.rule)
</script>

<template>
  <div class="ssc-list org-dept-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="公司名称">
            <a-input v-model:value="searchParam.companyName" :maxlength="20" allowClear placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="姓名">
            <a-input v-model:value="searchParam.contactName" :maxlength="20" allowClear placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="电话">
            <a-input v-model:value="searchParam.contactPhone" type="number" :maxlength="20" allowClear placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="状态">
            <a-select v-model:value="searchParam.status" :options="searchOptions.status" allowClear placeholder="请选择" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="发起日期">
            <a-range-picker v-model:value="searchTimes" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">信息收集</span>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'no'">
            <span>{{ (pagination.current - 1) * (pagination.pageSize as number) + index + 1 }}</span>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a @click="openModal(record)">去沟通</a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal v-model:visible="modal.visible" title="沟通" @ok="form.onOk">
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="公司名称" v-bind="validateInfos.companyName">
          <a-input v-model:value="modal.rowData.companyName" disabled />
        </a-form-item>
        <a-form-item label="姓名" v-bind="validateInfos.contactName">
          <a-input v-model:value="modal.rowData.contactName" disabled />
        </a-form-item>
        <a-form-item label="状态" v-bind="validateInfos.status">
          <a-select v-model:value="form.state.status" :options="form.options.status" placeholder="请选择" />
        </a-form-item>
        <a-form-item label="备注" v-bind="validateInfos.remark">
          <a-textarea v-model:value="form.state.remark" :rows="5" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped></style>
